<template>
  <div class="login">
    <div class="container">
      <a href="/index"><img src="../../public/imgs/login-logo.jpg" alt=""></a>
    </div>
    <div class="wrapper">
      <div class="container">
        <div class="login-form" v-if="loginStatus == 1">
          <h3>
            <span class="checked">账号登录</span><span class="sep-line">|</span><span>扫码登录</span>
          </h3>
          <div class="input">
            <input type="text" placeholder="请输入用户名" v-model="username">
          </div>
          <div class="input">
            <input type="text" placeholder="请输入密码" v-model="password">
          </div>
          <div class="btn-box">
            <a href="javascript:;" class="btn" @click="login">登录</a>
          </div>
          <div class="tips">
            <!-- <div class="sms">手机短信登录/注册</div> -->
            <!-- <div class="reg">立即注册<span>|</span>忘记密码？</div> -->
            <div class="reg" @click="goRegister">邮箱注册</div>
          </div>
        </div>

        <div class="register-form" v-if="loginStatus == 0">
          <h3>
            <span class="checked">邮箱注册</span>
          </h3>
          <div class="input">
            <input type="text" placeholder="请输入用户名" v-model="nusername">
          </div>
          <div class="input">
            <input type="text" placeholder="请输入密码" v-model="npassword">
          </div>
          <div class="input">
            <input type="text" placeholder="请确认密码" v-model="npassword2">
          </div>
          <div class="input">
            <input type="text" placeholder="请输入邮箱" v-model="nemail">
          </div>
          <div class="input code">
            <input type="text" placeholder="请输入验证码" v-model="ncheckCode"> <a href="javascript:;" class="btn verCode"
                                                                             @click="getCheckCode">获取验证码</a>
          </div>
          <div class="btn-box">
            <a href="javascript:;" class="btn" @click="newRegister">注册</a>
          </div>
          <div class="tips">
            <!-- <div class="sms">手机短信登录/注册</div> -->
            <!-- <div class="reg">立即注册<span>|</span>忘记密码？</div> -->
            <div class="sms" @click="goLogin">返回登录</div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footer-link">
        <a href="">zjun122的Git主页</a><span>|</span>
        <a href="">支付宝打米页面</a><span>|</span>
        <a href="">微信打米页面</a><span>|</span>
        <a href="">个人博客网站</a>
      </div>
      <div class="copyright">Copyright ©2023 mi.futurefe.com All Rights Reserved.</div>
    </div>

    <loading
        showType="barrier"
        imgSrc="/imgs/loading-svg/loading-spinning-bubbles.svg"
        v-if="showLoading"
    >

    </loading>
  </div>

</template>

<script>
import Loading from '@/components/Loading.vue';

export default {
  name: 'nong-login',
  components: {
    Loading
  },
  data() {
    return {
      username: '',
      password: '',
      nusername: '',
      npassword: '',
      npassword2: '',
      nemail: '',
      ncheckCode: '',
      userId: '',
      loginStatus: 1,
      showLoading: false,
    };
  },

  mounted() {
    this.routeChange()
  },
  watch: {
    '$route': 'routeChange'
  },

  methods: {
    login() {
      let {username, password} = this
      this.request.post('/user/login', {
        username, password
      }).then((res) => {
        this.$cookie.set('userId', res.id, {expires: 'Session'})
        this.$store.dispatch('saveUserName', res.username)
        this.$message.success('登录成功')
        this.$router.push({
          name: 'index',
          params: {
            from: 'login'
          }
        })
      })
    },
    //获取路由login参数
    routeChange() {
      this.loginStatus = this.$route.query.login == undefined ? 1 : parseInt(this.$route.query.login) //获取传参的login
      document.title = this.loginStatus == 1 ? '登录' : '注册'
    },
    getCheckCode() {
      var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      if (this.nusername == '') {
        this.$message.error('请输入账号')
        return
      }
      if (!reg.test(this.nemail)) {
        this.$message.error('请输入正确的邮箱')
        return
      } else {
        this.userGetCheckCode(this.nusername, this.nemail)
        this.showLoading = true
      }
    },
    userGetCheckCode(nusername, nemail) {
      this.request.post('/user/getCheckCode/' + nusername + '/' + nemail).then(() => {
        this.$message.success('验证码获取成功')
        this.showLoading = false
      }).catch(() => {
        this.$message.error('验证码获取失败，请重试')
        this.showLoading = false
      })
    },
    newRegister() {
      var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      var preg = /^(\w){6,12}$/;

      if (!this.nusername) {
        this.$message.error('账号不能为空')
        return
      }

      if (this.npassword && preg.test(this.npassword)) {

        if (this.npassword != this.npassword2) {
          this.$message.error('两次密码不一致')
          return
        }
      } else {
        this.$message.error('密码格式有误')
        return
      }

      if (!reg.test(this.nemail)) {
        this.$message.error('请输入正确的邮箱')
        return
      }

      if (!this.ncheckCode) {
        this.$message.error('验证码不能为空')
        return
      }

      this.userRegister(this.nusername, this.npassword, this.nemail, this.ncheckCode)
      this.showLoading = true
    },
    userRegister(username, password, email, checkCode) {
      this.request.post('/user/register', {
        username, password, email, checkCode
      }).then(() => {
        this.$message.success('注册成功，跳转到登录界面')
        this.showLoading = false
        this.goLogin()
      }).catch((res) => {
        this.$message.error(res)
        this.showLoading = false
      })
    },
    goLogin() {
      this.$router.push({path: '/Login?login=1'})
    },
    goRegister() {
      this.$router.push({path: '/Login?login=0'})
    }
  },
};
</script>

<style lang="scss" scoped>
@import '../assets/scss/mixin.scss';
@import '../assets/scss/config.scss';
@import '../assets/scss/button.scss';

.login {
  & > .container {
    height: 113px;

    img {
      width: auto;
      height: 100%;
    }
  }

  .wrapper {
    background: url('../../public/imgs/login-bg1.jpg') no-repeat center;

    .container {
      height: 576px;
      // position: relative;
      .login-form {
        position: absolute;
        bottom: 29px;
        right: 0;
        width: 410px;
        height: 510px;
        background-color: $colorG;
        padding: 0 31px;
        box-sizing: border-box;

        h3 {
          font-size: $fontE;
          line-height: 23px;
          margin: 40px auto 49px;
          text-align: center;

          .checked {
            color: $colorA;
          }

          .sep-line {
            margin: 0 32px;
          }
        }

        .input {
          display: inline-block;
          width: 348px;
          height: 50px;
          border: 1px solid $colorH;
          margin-bottom: 20px;

          input {
            width: 100%;
            height: 100%;
            padding: 18px;
            border: none;
          }
        }

        .btn-box {
          a {
            width: 348px;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            margin-top: 10px;
          }
        }

        .tips {
          display: flex;
          justify-content: space-between;
          margin-top: 14px;
          font-size: 14px;

          .sms {
            color: $colorA;
            cursor: pointer;
          }

          .reg {
            color: $colorD;
            cursor: pointer;

            span {
              margin: 0 7px;
            }
          }
        }
      }

      .register-form {
        position: absolute;
        bottom: 29px;
        right: 0;
        width: 410px;
        height: 510px;
        background-color: $colorG;
        padding: 0 31px;
        box-sizing: border-box;

        h3 {
          font-size: $fontE;
          line-height: 23px;
          margin: 40px auto 19px;
          text-align: center;

          .checked {
            color: $colorA;
          }

          .sep-line {
            margin: 0 32px;
          }
        }

        .input {
          display: inline-block;
          width: 348px;
          height: 40px;
          border: 1px solid $colorH;
          margin-bottom: 20px;

          input {
            width: 100%;
            height: 100%;
            padding: 18px;
            border: none;
          }
        }

        .code {
          @include flex();
          width: 348px;
          height: 40px;
          border: 1px solid $colorH;
          margin-bottom: 10px;

          .verCode {
            display: block;
            width: 100px;
            line-height: 40px;
          }

          input {
            display: block;
            // width: 208px;
            height: 100%;
            padding: 18px;
            border: none;
          }
        }

        .btn-box {
          a {
            width: 348px;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            margin-top: 10px;
          }
        }

        .tips {
          display: flex;
          justify-content: space-between;
          margin-top: 14px;
          font-size: 14px;

          .sms {
            color: $colorA;
            cursor: pointer;
          }

          .reg {
            color: $colorD;
            cursor: pointer;

            span {
              margin: 0 7px;
            }
          }
        }
      }
    }
  }

  .footer {
    height: 100px;
    padding-top: 60px;
    color: $colorD;
    font-size: 16px;
    text-align: center;

    .footer-link {
      a {
        color: $colorD;
      }

      span {
        margin: 0 10px;
      }
    }

    .copyright {
      margin-top: 13px;
    }
  }
}
</style>